<template>
  <div class="table-search-container" v-if="props.search.param.length > 0">
    <el-form
      ref="tableSearchRef"
      :model="state.form"
      size="default"
      class="table-form"
    >
      <div
        v-for="(val, key) in props.search.param"
        :key="key"
        class="table-search__left"
      >
        <template v-if="val.type !== ''">
          <div style="display: flex; margin-bottom: 10px">
            <div
              style="margin: auto 5px; margin-right: 5px"
              v-if="val.type != 'input'"
            >
              {{ val.label }}
            </div>
            <el-form-item :prop="val.prop">
              <!-- :label="val.label" label-width="100px"@change="onSearch(tableSearchRef)"-->
              <!-- :rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]" -->
              <el-input
                v-model="state.form[val.prop]"
                :placeholder="val.placeholder"
                v-if="val.type === 'input'"
                style="width: 350px"
              />
              <span class="timerange" v-else-if="val.type === 'daterange'">
                <el-date-picker
                  v-model="state.form[val.prop]"
                  type="daterange"
                  :placeholder="val.placeholder"
                  start-placeholder="请选择开始时间"
                  end-placeholder="请选择结束时间"
                  style="width: 100%"
                  value-format="YYYY-MM-DD"
                />
              </span>
              <span v-else-if="val.type === 'daterange2'">
                <el-date-picker
                  v-model="state.form[val.prop]"
                  type="date"
                  :placeholder="val.placeholder"
                  value-format="YYYY-MM-DD"
                />
              </span>
              <el-select
                v-model="state.form[val.prop]"
                :placeholder="val.placeholder"
                :multiple="val.multiple"
                :collapse-tags="val.multiple"
                v-else-if="val.type === 'select'"
                style="width: 100%"
                @change="selectChange"
              >
                <el-option
                  v-for="item in val.options"
                  :key="item.id"
                  :label="item.configValue"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="state.form[val.prop]"
                :placeholder="val.placeholder"
                v-else-if="val.type === 'select2'"
                style="width: 100%"
              >
                <el-option
                  v-for="item in val.options"
                  :key="item.id"
                  :label="item.configValue"
                  :value="item.configValue"
                >
                </el-option>
              </el-select>
              <el-cascader
                v-else-if="val.type === 'cascader'"
                :show-all-levels="false"
                :placeholder="val.placeholder"
                v-model="state.form[val.prop]"
                :props="cascaderProps"
                :options="val.options"
              />
              <el-cascader
                v-else-if="val.type === 'cascade2'"
                :show-all-levels="false"
                collapse-tags
                @change="cascaderChange"
                :placeholder="val.placeholder"
                v-model="state.form[val.prop]"
                :props="cascaderProps2"
                :options="val.options"
              />
              <!-- <el-cascader v-else-if="val.type === 'cascaderTwo'" :show-all-levels="false"
								v-model="state.form[val.prop]" :props="cascaderTwo" :options="val.options" /> -->
            </el-form-item>
          </div>
        </template>
      </div>
      <div class="table-search__default">
        <el-button
          size="default"
          type="primary"
          @click="onSearch(tableSearchRef)"
          >查询
        </el-button>
        <el-button
          v-if="search.reset"
          size="default"
          type="primary"
          plain
          class="ml10"
          @click="onReset(tableSearchRef)"
        >
          重置
        </el-button>
      </div>
      <div class="table-search__right">
        <template v-for="(v, inx) in search.btn" :key="inx">
          <el-button
            class="my-table__btn"
            size="default"
            :plain="inx !== 0"
            :disabled="v.disable"
            v-if="
              v.hide &&
              v?.type != 'slot' &&
              buttonDisplayOrNot(v.btns, v.btnCode)
            "
            @click="onClick(v.fun)"
            v-loading="v?.loading"
            :type="v?.type ? v?.type : 'primary'"
            :color="v?.color"
            >{{ v.text }}</el-button
          >
          <span class="my-table__btn" v-else-if="v?.type == 'slot'">
            <slot :name="v.text"></slot>
          </span>
        </template>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="makeTableDemoSearch">
import { reactive, ref, onMounted, watch } from 'vue'
import type { FormInstance } from 'element-plus'
import { debounce } from '/@/utils/loading'
import { buttonDisplayOrNot } from '/@/utils/buttonBoolean'
// 定义父组件传过来的值
const props = defineProps({
  // 搜索表单
  search: {
    type: Object,
    default: () => {}
  }
})
const cascaderProps = {
  expandTrigger: 'click' as const,
  value: 'id',
  label: 'configValue',
  emitPath: false,
  checkStrictly: true
}
const cascaderProps2 = {
  expandTrigger: 'click' as const,
  value: 'id',
  label: 'configValue',
  emitPath: false,
  multiple: true
  // checkStrictly: true
}

// 定义子组件向父组件传值/事件
const emit = defineEmits(['search', 'listenClick', 'change'])

// 定义变量内容
const tableSearchRef = ref<FormInstance>()
const state = reactive({
  form: {},
  isToggle: false
})

// 查询
const onSearch = (formEl: FormInstance | undefined) => {
  // 时间处理
  // let t = props.search.find(e=>{return e.type == 'daterange'})
  // 		if(typeof t != 'undefined'){
  // 			state.form[t?.propstart] = FunTime(state.form[t.prop][0]);
  // 			state.form[t?.propsend] = FunTime(state.form[t.prop][1]);
  // 			// delete state.form[t.prop]
  // 		}

  if (!formEl) return
  formEl.validate((valid: boolean) => {
    if (valid) {
      emit('search', state.form)
    } else {
      return false
    }
  })
}
// 重置
const onReset = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emit('search', state.form)
}
// 初始化 form 字段，取自父组件 search.prop
const initFormField = () => {
  if (props.search.param.length <= 0) return false
  props.search.param.forEach((v: any) => {
    state.form[v.prop] = ''
  })
}

const onClick = (fun: String) => {
  emit('listenClick', fun)
}

const selectChange = (val: any) => {
  emit('change', val)
}

const cascaderChange = (val: any) => {
  emit('change', val)
}

// 页面加载时
onMounted(() => {
  initFormField()
})

watch(
  () => props.search.resets,
  () => {
    // console.log('=============================')
    // // onReset(tableSearchRef)
    // // 	if (!tableSearchRef) return
    // // 	tableSearchRef?.value.resetFields()
    // tableSearchRef = ''

    if (!tableSearchRef.value) return
    tableSearchRef.value.resetFields()
  }
  // { immediate: true }
)
</script>

<style scoped lang="scss">
.el-form {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  // .el-form-item {
  // 	margin-top: 10px;
  // }
}

.table-search {
  &__left {
    margin-bottom: 10px;
  }

  &__default {
    margin-left: 10px;
    // margin-top: 10px;
    // margin-bottom: 10px;
  }

  &__right {
    margin-left: auto;
    // margin-top: 10px;

    .my-table__btn {
      margin-left: 10px;
    }
  }
}

.timerange {
  width: 350px;
}
</style>
<style>
.el-button--primary.is-plain {
  --el-button-bg-color: #ffffff;
  --el-button-hover-text-color: var(--el-color-primary);
  --el-button-hover-bg-color: #ffffff;
}

.el-button--primary.is-plain:hover {
  --el-button-hover-text-color: #fff;
  --el-button-hover-bg-color: var(--el-color-primary);
}
</style>
